<template>
    <view class="order">
        <uni-list :border="true">
            <uni-list-item
                v-for="(item, index) in checkList"
                :key="index"
                title=""
                rightText=""
                note=""
                thumb=""
                thumbSize="lg"
            >
                <template v-slot:header>
                </template>
                <template v-slot:body>
                    <view class="slot-box slot-text">
                        <view class="slot-box-row-1">
                            <view class="slot-box-row-1-left">
                                <image
                                    src="@/static/logo.png" 
                                    :draggable="false"
                                    mode="scaleToFill"
                                    class="slot-img-1"
                                ></image>
                                <view class="slot-box-row-1-left-text">{{ item.zcc_ex1 }}</view>
                            </view>
                            <view class="slot-box-row-1-right">
                                {{ item.zcc_ex7 }}
                            </view>
                        </view>
                        <view class="slot-text-color-1">有效期：{{ item.zcc_dat2 }}</view>
                        <view class="slot-text-color-1">优惠券类型：{{ item.zcc_ex9 }}</view>
                        <view class="slot-box-row-7 slot-text-color-1">
                            
                            <view style="display: flex; align-items: center;">
                                <button
                                    type="default"
                                    plain
                                    class="slot-btn"
                                    @click="goUrl('/pages/index/index')"
                                >
                                    去使用
                                </button>
                            </view>
                        </view>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
        <uni-load-more :status="status"></uni-load-more>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getCouponCodeListApi } from '@/apis'
    const checkList:Ref<any> = ref([
    ])
    const status: Ref<string> = ref('loading') //more: 加载前 loading: 加载中 no-more: 没有更多数据
    
    onLoad((val) => {
        
    })
    onShow(async() => {
        checkList.value = []
        status.value = 'loading'
        let res: any = await getCouponCodeListApi({})
        if (res.code == 200) {
            res.data.forEach(item => {
                if (item.effective == '有效') {
                    checkList.value.push(item)
                }
            })
        }
        status.value = 'no-more'
    })
    const goUrl = (val) => {
        uni.switchTab({
            url: val
        });
    }
</script>

<style lang="scss" scoped>
    .order {
        min-height: 100vh;
        background-color: #f2f2f2;
    }
    .my-segmented-control {
        width: 100%;
        position: fixed; 
        top: 0;
        z-index: 100;
        background-color: #f2f2f2;
    }
    .my-segmented-control-box {
        height: 80rpx;
    }
    .btn-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            width: 100rpx;
            height: 60rpx;
            display: flex;
            font-size: 30rpx;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    /* list样式修改 */
    .slot-box {
        // margin-top: 10rpx;
        flex: 1;
    	display: flex;
    	flex-direction: column;
        background: rgb(255, 255, 255);
        border-radius: 40rpx;
        box-sizing: border-box;
        padding: 20rpx;
        .slot-box-row-1 {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            border-bottom: 1rpx solid #fff5f5;
            box-sizing: border-box;
            padding: 12rpx 0;
            .slot-box-row-1-left {
                display: flex;
                align-items: center;
                .slot-img-1 {
                    width: 40rpx;
                    height: 40rpx;
                }
                .slot-box-row-1-left-text {
                    // color: #999;
                    box-sizing: border-box;
                    padding-left: 10rpx;
                }
            }
            .slot-box-row-1-right {
                color: #999;
            }
        }
        .slot-box-row-2 {
            display: flex;
        }
    }
    .slot-text {
    	font-size: 30rpx;
        .slot-text-color-1 {
            color: #535353;
            padding: 10rpx 0;
            font-size: 26rpx;
        }
        .slot-text-color-2 {
            color: #999;
        }
    }
    .slot-box-row-7 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .slot-img-2 {
            width: 40rpx;
            height: 40rpx;
        }
        .slot-btn {
            margin: 0;
            font-size: 20rpx;
        }
    }
    
    
    :deep(.uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
        }
    }
    :deep(.uni-list-item__container) {
        padding: 10rpx 10rpx !important;
        padding-left: 10rpx !important;
    }
    // 列表标题title,note
    :deep(.uni-list-item__content-title) {
        font-size: 30rpx;
    }
    :deep(.uni-list-item__content-note) {
        font-size: 30rpx;
    }
    :deep(.uni-list--border:after) {
        background-color: rgba(0,0,0,0) !important;
    }
    .my-popup-box {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-1.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            .my-popup-box-content-text-1 {
                padding-bottom: 20rpx;
            }
        }
    }
</style>
